<template>
	<view class="page" :style="'height:' + height + 'rpx'">
		<navigation :style="'height:' + navBarHeight + 'px;'">
			<template v-slot:content>
				<view class="content">
					<text class="iconfont icon-shangyige" @click="reback()"></text>
					<view class="title">部员课表</view>
				</view>
			</template>
		</navigation>
		<view class="excel" @click="ToOpenFile()">
			<view class="excel_title">
				<text style="font-weight: 700;">{{originName}}</text>
				<tect>成员无课时间一览表.xls</tect>
			</view>
			<view class="excel_icon iconfont icon-excel"></view>
		</view>
		<view class="tip">
			<!-- 			<view style="height: 40rpx;">
				<view class="tip_tip" style="font-size: 30rpx;font-weight: 700;">Tip</view>
				<view class="tip_tip_shallow"></view>
			</view> -->

			<!-- <view class="tip_title">所有成员确认后您方可支付后获取文件</view> -->
			<view class="tip_number">
				<view class="tip_number_title">
					已确认人数
				</view>
				<view class="tip_number_procentage">
					<text style="color: #23b8ff;font-weight: 700;">{{ackNumber}}</text>
					<text>/{{totalNumber}}</text>
				</view>
			</view>
		</view>
		<view class="member">
			<view style="height: 40rpx;">
				<view class="tip_tip" style="font-size: 30rpx;font-weight: 700;">注意事项</view>
				<view class="tip_tip_shallow"></view>
			</view>
			<view class="member_title">
				请通知您的部员前往"仲园课程表"小程序-"部员课表"-"菜单"-"邀请我的"进行确认，所有成员确认后您方可在支付后点击页面上方获取文件。
			</view>
			<scroll-view class="member_box" :scroll-top="scrollTop" scroll-y="true" show-scrollbar enable-flex>
				<view class="member_item" v-for="(item,index) in memberList" :key="index">
					<view class="member_item_name">
						{{item.info}}
					</view>
					<view class="type" v-if="item.status == 0" style="background-color: #EEAD0E">
						待确定
					</view>
					<view class="type" v-else-if="item.status == 1" style="background-color: #7CCD7C">
						已同意
					</view>
					<view class="type" v-else-if="item.status == 2" style="background-color: #EE5C42">
						已拒绝
					</view>
					<view class="shadow"></view>
				</view>
			</scroll-view>
			<view class="methods">
				<view class="add methods_commom" @click="addMember()">
					<view class="iconfont icon-tianjia1"></view>
					<view style="font-size: 24rpx;">成员添加</view>
				</view>
				<view class="delete methods_commom" @click="deleteMember()">
					<view class="iconfont icon-jianshao"></view>
					<view style="font-size: 24rpx;">成员删除</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view style="height: 40rpx;">
				<view class="tip_tip" style="font-size: 30rpx;font-weight: 700;">
					<text>支付</text>
					<text style="margin-left: 10rpx;">(已售:</text>
					<text style="color: #23B8FF;font-size: 34rpx;">{{sale}}</text>
					<text>份)</text>
				</view>
				<view class="tip_tip_shallow"></view>
			</view>
			<button :style="backgroundColor" @click="pay()">立即支付￥{{money}}</button>
		</view>
	</view>
</template>
<script>
	import getDepartMentMixin from "../../static/js/getDepartMentMixin.js"
	import Parser from "../../lib/dom-parser.js"
	export default {
		mixins: [getDepartMentMixin],
		onLoad(option) {
			this.header.Authority = uni.getStorageSync('Authority');
			this.navBarHeight = getApp().globalData.navBarHeight //导航栏高度
			// console.log(option)
			// console.log(this.ackNumber == this.totalNumber)
			// 先写固定
			if (option.xlsId) {
				// console.log(option);
				this.xlsId = option.xlsId;
				// this.originName = option.originName;
			}
		},
		onShow() {
			if (this.ispay) {
				
			} else {
				uni.showLoading({
					title: '加载中..',
					mask: true
					// mask: true
				})
				this.getSale()
				this.getMyCreated();
				this.getMember(() => {
					uni.hideLoading();
				})
			}
		},
		data() {
			return {
				navBarHeight: 0,
				currentChoose: [], //当前选择的成员
				header: {
					Authority: ''
				},
				xlsId: "",
				originName: '', //组织名称
				// memberList: [],
				ackNumber: 0, //待确定人数
				totalNumber: 0, //总人数
				status: 0, //订单状态
				url: '', //文件地址
				openId: '',
				sale: 0,
				hasPayButFail: false, //出现支付成功但是文件下载失败
				ispay: false
				// hasReject: false

			}
		},
		computed: {
			backgroundColor() {
				if ((this.ackNumber == 0 && this.totalNumber == 0) || this.hasPayButFail || this.hasReject) {
					return 'background-color: #A4D3EE;'
				}
				if (this.ackNumber == this.totalNumber && this.status != 2) {
					return 'background-color: #23b8ff;'
				} else {
					return 'background-color: #A4D3EE;'

				}
			},
			money() {
				return (this.memberList.length * 0.99).toFixed(2) //保留小数点后两位
			}
		},
		methods: {
			reback() {
				// console.log('执行')
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 300)
			},
			async getSale(callback) {
				let res = await getApp().UniRequest("/timeoff/getFakeSale", "Get", "",
					this.header);
					console.log(res)
				if (res.code === 20000) {

					this.sale = res.data.data;

					callback && callback() //是否显示loading
				}
				// console.log(res,'已售出');
			},
			async getMyCreated() {
				// console.log('执行getMyCreated')
				let res = await getApp().UniRequest("/timeoff/authority/getMyCreated", "Get", "",
					this.header);
				if (res.code === 20000) {
					// console.log('我创建的',res)
					let data = res.data.data;
					// console.log(data);
					data.forEach((item, index) => {
						// console.log(item.xlsId);
						// console.log(this.xlsId)
						if (item.xlsId == this.xlsId) {
							this.originName = item.name;
							this.status = item.status;
							if (this.status == 2) {
								this.url = "https://www.zcjn.top/zkFile/timeoff/downloadXls?xlsId=" + this
									.xlsId
							}
							return;
						}
					})
				}
				// console.log(res, '我创建的')
			},
			async pay() {
				// console.log('点击')
				let ip;
				let that = this;
				let outTradeNo = this.randomString(15);
				// console.log(outTradeNo, '随机号')
				// console.log(this.xlsId);
				// console.log(this.status,'状态码')
				// console.log(this.hasReject,11)
				if (this.hasReject) {
					uni.showModal({
						title: '提示',
						content: '有成员拒绝加入,文件已失效,请重建',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
					return;
				}
				if (this.status == 2) {
					uni.showModal({
						title: '提示',
						content: '已支付,可直接打开上面的文件',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
					return;
				}
				if (this.ackNumber == 0 && this.totalNumber == 0) {
					uni.showToast({
						title: '请选择成员',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				if (this.ackNumber == this.totalNumber) {
					uni.showLoading({
						title: '加载中..',
						mask: true
						// mask: true
					})
					let that = this;
					let error = false
					//返回结果和封装的不一样，所以用uni.request
					uni.request({
						url: 'https://www.zcjn.top/zkCourse/user/authority/getOpenId', //因为返回值格式不同，所以不能用封装好的。
						header: this.header,
						success: (res) => {
							// console.log(res.data.data.data, '我的openid');
							if (res.data.code === 20000) {
								// console.log(res.data.data.data, '我的openid');
								this.openId = res.data.data.data;
								// console.log(this.openId,'this.openId')
								let ip;
								wx.request({
									url: 'https://pv.sohu.com/cityjson?ie=utf-8',
									success: async function(e) {
										// console.log(e.data,'ip')
										let index = e.data.indexOf('=')
										// console.log(e.data.substring(index + 1))
										let temp = e.data.substring(index + 1);
										temp = temp.substring(0, temp.indexOf(';'))
										// console.log(JSON.parse(temp))
										ip = JSON.parse(temp).cip;
										console.log(ip)
										uni.request({
											url: 'https://www.zcjn.top/pay/wxPay/test', //仅为示例，并非真实接口地址。
											method: 'GET',
											success: (res) => {
												console.log(res, '是否挂');
												if (res.data === '???') {
													console.log('没挂')
													let xmlData;
													// console.log(ip);
													let price = that.memberList
														.length * 99;
													let body = {
														"body": "文件",
														"outTradeNo": outTradeNo,
														"totalFee": price,
														"spbillCreateIp": ip,
														"notifyUrl": "http://www.weixin.qq.com/wxpay/pay.php",
														"tradeType": "JSAPI",
														"openid": that.openId
													}
													// console.log(body)
													uni.request({
														url: 'https://www.zcjn.top/pay/wxPay/createOrder', //仅为示例，并非真实接口地址。
														data: body,
														method: 'POST',
														success: (res) => {
															uni.hideLoading()
															// console.log(JSON.parse($(res.data)[2].innerHTML) );
															xmlData =
																res
																.data;
															// console.log(xmlData)
															let XMLPaser =
																new Parser
																.DOMParser();
															let doc =
																XMLPaser
																.parseFromString(
																	res
																	.data
																);
															let timeStamp =
																doc
																.getElementsByTagName(
																	'timeStamp'
																)[
																	0]
																.firstChild
																.data;
															let nonceStr =
																doc
																.getElementsByTagName(
																	'nonceStr'
																)[
																	0]
																.firstChild
																.data;
															let packageValue =
																doc
																.getElementsByTagName(
																	'packageValue'
																)[
																	0]
																.firstChild
																.data;
															let paySign =
																doc
																.getElementsByTagName(
																	'paySign'
																)[
																	0]
																.firstChild
																.data;
															// console.log('解析出来的', timeStamp)
															// console.log('解析出来的', nonceStr)
															// console.log('解析出来的', packageValue)
															// console.log('解析出来的', paySign);
															that.ispay = true
															wx.requestPayment({
																timeStamp: timeStamp,
																nonceStr: nonceStr,
																package: packageValue,
																signType: 'MD5',
																paySign: paySign,
																success: async (
																	res
																) => {
																	console
																		.log(
																			'支付成功'
																		)
																		// uni.hideLoading()
																	uni.showModal({
																		title: '提示',
																		content: '需要若干秒等待文件生成',
																		showCancel: false,
																		success: function(
																			res
																		) {
																			if (res
																				.confirm
																			) {
																				uni.showLoading({
																					title: '请稍等..',
																					mask: true
																					// mask: true
																				})
																				uni.request({
																					url: 'https://www.zcjn.top/zkFile/timeoff/simulatePay?xlsIdStr=' +
																						that
																						.xlsId,
																					data: body,
																					header: that
																						.header,
																					method: 'POST',
																					success: async (
																						res
																					) => {
																						console
																							.log(
																								'模拟结果',
																								res
																							);
																						if (res
																							.data
																							.code ===
																							20000
																						) {
																							that.url =
																								'https://www.zcjn.top/zkFile/timeoff/downloadXls?xlsId=' +
																								that
																								.xlsId;
																							// console.log(res, '成功');
																							// uni.hideLoading();
																							// uni.showLoading({
																							// 	title: '加载中..',
																							// 	mask: true
																							// 	// mask: true
																							// })
																							await that.getMyCreated()
																							await that
																								.getMember();
																							await that.getSale(() => {
																								uni.hideLoading()
																							})
																							
																							uni.showModal({
																								title: '提示',
																								content: '支付成功！点击页面上方即可打开Excel文件',
																								showCancel: false,
																								success: function(
																									res
																								) {
																									if (res
																										.confirm
																									) {}
																								}
																							});

																							// that
																							// 	.openFile();

																						} else {
																							that.hasPayButFail =
																								true
																							uni.showLoading({
																								title: '请稍等..',
																								mask: true
																								// mask: true
																							})
																							await that.getMyCreated()
																							await that
																								.getMember();
																							await that.getSale(() => {
																								uni.hideLoading()
																							})
																							uni.showModal({
																								title: '提示',
																								content: '文件下载失败。请前往 "我的" - "联系客服"',
																								showCancel: false,
																								success: async function(
																									res
																								) {}
																							});

																						}

																					},
																					fail(
																						error
																					) {
																						// console.log(111, error)
																					}
																				});
																			}
																		}
																	});

																	// let data =
																	// 	await getApp()
																	// 	.UniRequest(
																	// 		"/timeoff/authority/simulatePay?xlsIdStr=" +
																	// 		that
																	// 		.xlsId,
																	// 		"POST",
																	// 		"",
																	// 		that
																	// 		.header
																	// 	);

																	// console.log(data, '模拟结果');;


																},
																fail(
																	res
																) {
																	uni.showToast({
																	    title: '请先支付',
																		icon: 'error',
																	    duration: 2000
																	});
																}
															})
														},
														fail(error) {
															// console.log(111, error)
														}
													});
												}
											},
											fail(error) {
												// console.log(111, error)
											}
										});


									}
								});
							} else {
								uni.showToast({
									title: '请稍后重试',
									icon: 'error',
									duration: 2000
								});
								this.error = true
							}
						}
					});
					// console.log(this.url)
				} else {
					uni.showToast({
						title: '成员未完全通过',
						icon: 'error',
						duration: 2000
					});
				}
			},
			randomString(len) {
				len = len || 32;
				var $chars =
					'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
				var maxPos = $chars.length;
				var pwd = '';
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				// console.log('随机数', pwd)
				return pwd;
			},
			addMember() {
				if (this.status == 2) {
					uni.showModal({
						title: '提示',
						content: '已支付完毕，无法再添加成员',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
				} else if (this.hasReject) {
					uni.showModal({
						title: '提示',
						content: '有成员拒绝加入,文件已失效,请重建',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
				} else {
					uni.navigateTo({
						url: '../departmentIndex/departmentIndex?xlsId=' + this.xlsId + '&payMent=' + 1
					})
				}

			},
			deleteMember() {
				if (this.status == 2) {
					uni.showModal({
						title: '提示',
						content: '已支付完毕，无法再删除成员',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
				} else if (this.hasReject) {
					uni.showModal({
						title: '提示',
						content: '有成员拒绝加入,文件已失效,请重建',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
				} else {
					uni.navigateTo({
						url: '../deleteMember/deleteMember?xlsId=' + this.xlsId + '&originName=' + this.originName
					})
				}

			},

			ToOpenFile() {
				console.log(this.url, '文件地址')
				if (this.url) {
					uni.showLoading({
						title: '加载中..',
						mask: true
						// mask: true
					})
					this.openFile()
				}
			},
			//打开文件
			openFile() {
				// console.log('点击');
				wx.downloadFile({
					url: this.url,
					success(res) {
						// console.log('下载成功', res)
						// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
						let Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用

						wx.openDocument({

							filePath: Path,
							fileType: 'xls',
							showMenu: true,

							success: function(res) {
								uni.hideLoading()
								// console.log('打开成功');


							},
							fail: function(error) {
								// console.log('失败', error)
							}

						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;

		navigation {
			width: 100%;
			position: relative;
			z-index: 100;

			.content {
				display: flex;
				align-items: center;
				justify-content: center;

				.icon-shangyige {
					font-size: 40rpx;
					font-weight: 700;
					position: absolute;
					left: 0rpx;
				}

				.title {}
			}
		}

		button {
			background-color: #fff;
			border: 0rpx;
			padding-right: 10rpx;
			padding-left: 10rpx;
		}

		.common_info {
			display: flex;
			// margin-left: 25rpx;
			letter-spacing: 2rpx;
			margin-bottom: 16rpx;
			padding-top: 10rpx;
			padding-bottom: 20rpx;
			font-size: 32rpx;

			.title {
				width: 35%;
				margin-right: 20rpx;
				font-weight: 700;
			}

			.content {
				width: 65%;
				padding-bottom: 5rpx;
				border-bottom: 4rpx solid #A9A9A9;
			}
		}

		.excel {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 95%;
			height: 160rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0rpx 10rpx 20rpx;
			letter-spacing: 2rpx;
			font-size: 34rpx;
			// border-radius: 20rpx;
			box-shadow: 0.2rpx 0.2rpx 10rpx #D9D9D9;

			.excel_title {
				width: 80%;
				//超出隐藏
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				overflow: hidden;
				-webkit-box-orient: vertical;
			}

			.excel_icon {
				width: 20%;
				text-align: center;
				font-size: 80rpx;
				color: #1d6c3f;
			}
		}

		.tip_tip {
			position: absolute;
			z-index: 100;
			letter-spacing: 2rpx;
			color: #707070;
		}

		.tip_tip_shallow {
			position: absolute;
			top: 30rpx;
			z-index: 1;
			background-color: #23b8ff;
		}

		.tip {
			margin-top: 40rpx;
			position: relative;
			font-size: 36rpx;

			.tip_tip {
				width: 70rpx;
				height: 40rpx;
			}

			.tip_tip_shallow {
				width: 70rpx;
				height: 10rpx;
			}

			.tip_title {
				margin-top: 20rpx;


			}

			.tip_number {
				width: 100%;
				text-align: center;
				display: flex;
				height: 90rpx;
				align-items: center;
				justify-content: center;

				.tip_number_title {
					font-size: 34rpx;
					// margin-right: 16rpx;
				}

				.tip_number_procentage {
					// width: 90rpx;
					height: 90rpx;
					// background-color: pink;
					line-height: 90rpx;
					text-align: center;
					font-size: 56rpx;
					margin-left: 46rpx;
				}
			}



		}

		.tip .tip_title,
		.tip .tip_number_title,
		.member .member_title {
			font-size: 32rpx;
			letter-spacing: 2rpx;
			color: #707070;
		}

		.member {
			margin-top: 60rpx;
			position: relative;

			.tip_tip {
				width: 155rpx;
				height: 40rpx;
			}

			.tip_tip_shallow {
				width: 155rpx;
				height: 10rpx;
			}

			.member_title {
				margin-top: 40rpx;
				line-height: 60rpx;
			}

			.methods {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.methods_commom {
					// height: 60rpx;
					text-align: center;
					padding: 10rpx 20rpx 10rpx 20rpx;
					color: #A1A1A1;

					// background-color: pink;
					.iconfont {
						font-size: 44rpx;
					}
				}
			}

			scroll-view {
				width: 94%;
				height: 320rpx;
				background-color: #f2f2f2;
				margin: 0 auto;
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				padding: 0rpx 0rpx 20rpx 20rpx;
				letter-spacing: 2rpx;

				.member_item {
					width: 46%;
					height: 100rpx;
					z-index: 0;
					margin-top: 20rpx;
					position: relative;
					line-height: 120rpx;
					text-align: center;
					background-color: #fff;
					border-radius: 10rpx;
					color: #707070;
					// &:nth-child(odd) {
					margin-right: 4%;

					// }
					.member_item_name {
						width: 100%;
						padding-left: 5rpx;
						padding-right: 5rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.type {
						position: absolute;
						// z-index: 1000;
						right: -16rpx;
						top: 4rpx;
						letter-spacing: 1rpx;

						// #87CEEB
						//#9BCD9B
						background-color: #FF6347;
						color: #fff;
						width: 80rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						letter-spacing: 2rpx;
						// box-shadow: 0.2rpx 0.2rpx 10rpx #23b8ff;
					}

					.shadow {
						position: absolute;
						right: -16rpx;
						top: 39rpx;
						// left: 20rpx;
						border: 8rpx solid #D6D6D6;
						border-right: 8rpx solid transparent;
						border-bottom: 8rpx solid transparent;
						width: 0;
						height: 0;
					}
				}
			}
		}

		.pay {
			position: relative;
			margin-top: 40rpx;

			.tip_tip {
				// width: 160rpx;
				height: 40rpx;
			}

			.tip_tip_shallow {
				width: 84rpx;
				height: 10rpx;
			}

			button {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
				background-color: #23b8ff;
				color: #FFFFFF;
				width: 350rpx;
				font-size: 32rpx;
			}
		}
	}
</style>
